<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
                template="../Templates/InnerSystemTemplate.xhtml"
                xmlns:p="http://primefaces.prime.com.tr/ui"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core">
    <ui:define name="head-title">
        <title>To-do List | Merlion's ERP System</title>
    </ui:define>
    
    <ui:define name="content"><br/><br/>
        <p:panel header="To-do List" id="panel">
            <f:view beforePhase="#{todoListManagerBean.initView}">
                <h:form id="form" prependId="false">
                    <p:messages />
                    <p:dataTable var="todoList" value="#{todoListManagerBean.todoLists}" dynamic="true" paginator="true" selection="#{todoListManagerBean.selectedTodoList}"
                                 rows="10" emptyMessage="No tasks found in database." id="tasksTable"> 
                        <f:facet name="header">
                            
                        </f:facet>
                        <p:column selectionMode="single" />
                        
                        <p:column sortBy="#{todoList.task}" filterBy="#{todoList.task}">
                        <f:facet name="header">
                            <h:outputText value="Tasks"/>
                        </f:facet>
                            <h:outputText value="#{todoList.task}"/>
                        </p:column>
                        <f:facet name="footer">
                            <p:commandButton value="Create New Task" onclick="createTaskDialog.show()" ajax="true"/>
                            <p:commandButton value="Edit" onclick="editTaskDialog.show()" update="editGrid"/>
                            <p:commandButton value="Delete" onclick="deleteTaskDialog.show()" ajax="true"/>
                        </f:facet>
                    </p:dataTable>
                    
                    <p:dialog widgetVar="createTaskDialog" id="create" width="340" height="300">
                        <h:panelGrid id="createGrid">
                            <h:outputText value="Task: "/>
                            <p:inputTextarea value="#{todoListManagerBean.task}" autoResize="false" style="width: 300px; max-width: 300px; height:  150px; max-height:  150px; overflow: scroll; border-style: none;"/>
                            <p:commandButton value="Create" actionListener="#{todoListManagerBean.create(event)}" oncomplete="createTaskDialog.hide()" update="panel create createGrid toDoList"/>
                        </h:panelGrid>
                    </p:dialog>
                    
                    <p:confirmDialog message="Do you want to delete this task?" widgetVar="deleteTaskDialog">
                        <p:commandButton value="Yes" actionListener="#{todoListManagerBean.delete(event)}" update="panel toDoList" oncomplete ="deleteTaskDialog.hide()"/>
                        <p:commandButton value="No" onclick="deleteTaskDialog.hide()"/>
                    </p:confirmDialog>
                    
                </h:form>
                
                <h:form prependId="false" id="form1">
                    <p:dialog widgetVar="editTaskDialog" id="edit"  width="340" height="300">
                        <h:panelGrid id="editGrid">
                            <h:outputText value="Task: "/>
                            <p:inputTextarea value="#{todoListManagerBean.selectedTodoList.task}" autoResize="false" style="width: 300px; max-width: 300px; height:  150px; max-height:  150px; overflow: scroll; border-style: none;"/>
                            <p:commandButton value="Save" actionListener="#{todoListManagerBean.edit}" oncomplete="editTaskDialog.hide()" update="panel edit editGrid form1 toDoList"/>
                        </h:panelGrid>
                        
                    </p:dialog>
                    
                    
                </h:form>
            </f:view>
        </p:panel>
    </ui:define>
    <ui:define name="left-content">
        
        Welcome <h:outputText value="#{controller.employee.userName}" />.<br/><br/>
        
    </ui:define>    
</ui:composition>
